import { Card, PageHeader,Form,Input,Button, Select,message } from "antd"
import { useState } from "react"
import { useEffect,useMemo,If } from "react"
import { queryPosition,queryDepart,saveEmp,updateEmp } from "../../../../../utils/request/api"
import "./index.css"
export default ({id,cancel,ok,cachedata})=>{
    useEffect(()=>{
       initSelect()
      //  console.log(id);
      //  console.log(form);
      //  console.log(config);
       if(id){
        for(let k in config){
          form.setFieldValue(k,id[k])
        }
       }
    },[])
    let [selOption,setSelOption]=useState({
      depID:[],
      positionId:[]
    })
    const [form]=Form.useForm()
    const config={
      name: "姓名",
      age: "年龄",
      sex: "性别",
      idCard: "身份证",
      NativePlace: "籍贯",
      education: "学历",
      school: "毕业院校",
      tel: "电话",
      depID: "部门",
      // depName: "部门",
     
      // entryTime: "入职时间",
      // id: 3
    
     
      positionId:"职位",
      major: "业务",

      // positionName: "职位",
      resume: "头像",
      salary: "薪酬",
      assessmentSalary: "底薪",
     
  }
    const record=id=>{
      console.log(id);
      let params=form.getFieldsValue()
      if(id){// 修改
         params.id=id.id
      console.log(params);
        updateEmp(params)
        .then(res=>{
            console.log(res);
            if(res.meta.code==200){
              ok&&ok(selOption)
              message.success(res.meta.msg)
            }
        })
      }else{// 添加
          saveEmp(params)
          .then(res=>{
            console.log(res);
            if(res.meta.code==200){
              message.success(res.meta.msg)
              ok&&ok(selOption)

              //  form.setFieldsValue(undefined)
            }
          })
      }
    }
    const initSelect=async ()=>{// 初始下拉框数据
         const control=(data,key)=>{
             return data.map(v=>{
                 return{
                   label:v[key],
                   value:v.id
                 }
             })
         }
        //  console.log(cachedata);
         if(Object.keys(cachedata).length==0){// 没有缓存 请求数据
          let posRes=await queryPosition({pageNum:1,pageSize:1000})
          let depRes=await queryDepart({pageNum:1,pageSize:1000})
         //  console.log(posRes);
          selOption.depID=control(depRes.data,"depName")
          selOption.positionId=control(posRes.data,"positionName")
          // console.log(selOption);
          setSelOption({...selOption})
         }else{// 有缓存 用缓存
             setSelOption({...cachedata})
         }

         

    }
    

     const renderForm= useMemo(()=>{
          
        let selectArr=['depID','positionId']

        return <Form
        // {...formItemLayout}
        layout={"horizontal"}
        form={form}
        // initialValues={{ layout: formLayout }}
        // onValuesChange={onFormLayoutChange}
      >
        {Object.keys(config).map((v,k)=> 
        <Form.Item label={config[v]} name={v}>
         
            {
            !selectArr.includes(v)?<Input placeholder={`请输入${config[v]}`} />
             :<Select
              // defaultValue="lucy"
              placeholder={`请选择${config[v]}`}
              getPopupContainer={triggerNode => (triggerNode.parentElement || document.body)} 
              style={{ width: "100%" }}
              // onChange={handleChange}
             
              options={selOption[v]}
            />
            }
        
        </Form.Item>)}
        
        </Form>
     },[selOption])
     

    return <>
    <PageHeader
        className="site-page-header"
        onBack={() => cancel&&cancel(selOption)}
        title={id?'修改员工信息':"添加员工信息"}
        extra={<div style={{
          display:'flex',
          justifyContent:"center"
        }}>
        <Button 
        onClick={()=>record(id)}
        type="primary">
          {id?'修改':'添加'}
        </Button >
          &nbsp;
          &nbsp;
        <Button type="" onClick={()=>cancel&&cancel(selOption)}>取消</Button>
        </div>}
       
    />
      <Card 
     
      style={{
        width:'70%',
        margin:"0 auto",
        height:"600px",
        overflow:"auto"
        }}>
      
          {renderForm}
      
        
      </Card>
      
    </>
    
}